<template>
  <div class="reportRight item-space">
    <div class="wholeTitle borderBottom flex">
      <span v-for="(item,index) in reportStore.reportLeftItem.fullPath">
        {{ item }}{{ index == reportStore.reportLeftItem.fullPath.length - 1 ? '' : '/' }}
      </span>
    </div>
    <div class="content">
      <div class="top flex flex-align-center">
        <div class="tiemText">统计时间：</div>
        <el-date-picker
            size="large"
            v-model="reportStore.reportTime"
            type="date"
            placeholder="请选择日期"
            :disabled-date="disabledDate"
            @change="chooseDate"
            class="ml-2"
            value-format="YYYY-MM-DD"
        />
        <button class="btn-baseStyle ml-4" style="background-color:#F88B17" @click="exportMx">下载报表</button>
        <button class="btn-baseStyle ml-4" style="background-color:#007FFF"
                v-if="reportStore.menuRight.hasReportFile===0" @click="jumpSetReport(0)">生成报告
        </button>
        <button class="btn-baseStyle ml-4" style="background-color:#13CE66"
                v-if="reportStore.menuRight.hasReportFile===1" @click="jumpSetReport(1)">查看报告
        </button>
        <button class="btn-baseStyle ml-4" style="background-color:#007FFF"
                v-if="reportStore.menuRight.hasReportFile===1" @click="jumpSetReport(0)">重新生成报告
        </button>
      </div>
      <div class="bottom mt-8 flex ">
        <div class="left mr-6 tableUIReset">
          <div class="wholeTitle">{{ reportStore.reportRightItem.name }}</div>
          <el-table
              v-if="reportStore.reportRightItem.viewType==1"
              height="500"
              v-loading="reportStore.tableLoading"
              class="mt-6"
              stripe
              :data="reportStore.reportRightItem.dataList"
              border
              style="width: 100%"
              header-row-class-name="rptableClassNmae"
          >
            <el-table-column prop="index" label="序号" width="90" header-align="center" align="center">
              <template #default="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column sortable v-for="(item,index) in reportStore.reportRightItem.headers" :prop="item"
                             :label="item" header-align="center" align="center"/>
            <el-table-column label="操作" align="center" header-align="center">
              <template #default="scope">
                <div class="flex flex-justify-content-center">
                  <div class="flex">
                    <div class="tableScopeText pointer" @click="lookDetail(scope.row)">查看</div>
                    <div class="tableScopeText ml-2 mr-2">|</div>
                    <a target="_blank"
                       :href="`/reportApi/report/report/export/sts/data/detail?dataId=${scope.row._dataId}&rrtoken=${token.value}`"
                       class="tableScopeText" style="text-decoration: none">下载</a>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div v-else v-loading="reportStore.tableLoading">
            <reportEditor :readonly="readonly" v-model="reportStore.reportRightItem.customerText"
                          class="mt-6"></reportEditor>
            <button class="btn-baseStyle mt-4 btn-Primary" @click="editCustomerText">{{
                readonly ? '点击修改' : '确认保存'
              }}
            </button>
          </div>

        </div>
        <el-scrollbar height="600" class="right">
          <right-menu
              v-if="menuRightList"
              :default-active-id="reportStore.reportRightItem.id"
              :default-openeds="reportStore.defaultRightOpends"
              :menu-right-list="menuRightList"
              @handleClick="handleClick"
          >
          </right-menu>
        </el-scrollbar>

      </div>
    </div>
    <look-dialog ref="lookDialog"></look-dialog>
  </div>
</template>

<script setup lang="ts">
//组件
import RpMenuItem from "@/components/contentRight/rprightMenuItem.vue";
import LookDialog from "@/views/report/components/lookDialog.vue";
import {cloneDeep} from "@/utils/cloneDeep";
import reportEditor from '@/components/reportEditor/index.vue'
//接口

//api
import {reactive, ref, onMounted, defineProps} from 'vue';
import {timestampToDate} from "@/utils/dateUtilsT";
import useReportStore from "@/store/modules/report/report";
import type {rpResultData} from "@/api/reportCom/type";
import * as XLSX from "xlsx";
import {cookie} from "@/utils/cookie";
import RightMenu from "@/components/contentRight/rightMenu.vue";
import {useRouter} from "vue-router";
import {structResultItem} from "@/api/reportCom/type";
import {ElMessage} from "element-plus";
//data
let date = ref<string>('')
let reportStore = useReportStore()
let props = defineProps<{
  timeList: string[],
  menuRightList?: structResultItem[]
}>()
let token = cookie.getCookie('token')
let lookDialog = ref()
let router = useRouter()
let value = ref(reportStore.reportRightItem.customerText)
let readonly = ref(true)

/**************************接口函数**************************/


/**************************操作函数**************************/

//禁止选用的日期
const disabledDate = (dates: Date) => {
  return props.timeList.indexOf(timestampToDate(dates)) === -1
}

//选择日期
const chooseDate = (date: Date) => {
  // reportStore.setReportTime(timestampToDate(date))
  reportStore.useGetRpResult()
}

//导出明细
const exportMx = () => {
  let wb = XLSX.utils.book_new()
  let header: any
  header = {}
  let tableData: any
  tableData = {}
  let arr = []
  let data = []
  reportStore.allTable.forEach((item) => {
    header[item.name] = cloneDeep(item.headers)
    tableData[item.name] = cloneDeep(item.dataList)
  })
  console.log(reportStore.reportRightItem.dataList)

  for (let i in tableData) {
    tableData[i].forEach((item: any) => {
      delete item._dataId
    })
  }


  console.log(tableData, header)
  for (let i in header) {
    let newObj = []

    for (let key in tableData[i][0]) {
      newObj.push(key)
    }
    let headerWs = XLSX.utils.aoa_to_sheet([header[i]])
    let newArr = cloneDeep(tableData[i])

    newArr.forEach((item: any, index: number) => {
      header[i].forEach((h: string, hindex: number) => {
        item[hindex] = tableData[i][index][h] + ''
        delete item[h]
      })
    })

    let ws = XLSX.utils.sheet_add_json(headerWs, newArr, {
      skipHeader: true,
      origin: 'A2'
    })
    data.push(
        {
          ws: ws,
          name: i
        }
    )
  }
  data.forEach((item) => {
    XLSX.utils.book_append_sheet(wb, item.ws, item.name)
  })
  XLSX.writeFile(wb, `${reportStore.reportLeftItem.name}表.xlsx`)
}

//查看
const lookDetail = (item: any) => {
  lookDialog.value.init(item._dataId)
}

//选择
const handleClick = (value: any) => {
  reportStore.reportRightItem = value
}

const jumpSetReport = (type: number) => {
  // router.push({
  //   path: 'Management/editReportTemplate',
  //   query: {
  //     instanceId: reportStore.menuRight.instanceId,
  //     type: type
  //   }
  // })
  window.open(`Management/editReportTemplate?instanceId=${reportStore.menuRight.instanceId}&type=${type}`)
}

const editCustomerText = () => {
  if (!readonly.value) {
    reportStore.useSaveCustomerText()
  }
  readonly.value = !readonly.value
  console.log(reportStore.reportRightItem.id)
}

</script>

<style lang="scss" scoped>
.reportRight {
  width: 82%;




  .content {

    .top {
      .tiemText {
        font-size: 18px;
      }
    }

    .bottom {
      .left {
        width: 75%;
        padding: 25px;
        background-color: rgba(247, 247, 247, 1);
      }

      .right {
        background-color: rgba(247, 247, 247, 1);
        flex: 1;

        .el-menu-vertical-demo {
          border: none;
          width: 100%;
        }
      }
    }
  }
}
</style>
